<template>
  <div class="student-layout">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '220px'" class="aside-container">
        <div class="logo" :class="{ 'collapsed': isCollapse }">
          <img src="@/assets/sport.ico" alt="Logo" class="logo-image" />
          <span class="logo-text" v-show="!isCollapse">体测管理系统</span>
        </div>
        <el-menu :default-active="$route.path" class="el-menu-vertical" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF" router>
          <el-menu-item index="/student/announcements">
            <el-icon>
              <Bell />
            </el-icon>
            <span>公告栏</span>
          </el-menu-item>
          <el-menu-item index="/student/scores">
            <el-icon>
              <Document />
            </el-icon>
            <span>我的成绩</span>
          </el-menu-item>
          <el-menu-item index="/student/profile">
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>个人中心</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="header-left">
            <div class="toggle-button" @click="toggleCollapse">
              <el-icon>
                <Fold v-if="!isCollapse" />
                <Expand v-else />
              </el-icon>
            </div>
          </div>
          <div class="header-right">
            <el-dropdown @command="handleCommand">
              <span class="user-dropdown">
                <el-avatar :size="32" class="user-avatar" :src="userInfo.avatarUrl">
                  <el-icon>
                    <UserFilled />
                  </el-icon>
                </el-avatar>
                <span class="username">{{ userInfo.username }}</span>
                <el-icon>
                  <ArrowDown />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { Bell, Document, UserFilled, ArrowDown, Fold, Expand } from '@element-plus/icons-vue'
import { getUserInfo, clearLoginInfo, getCurrentUser, removeCurrentUser } from '@/utils/auth'

const router = useRouter()
const isCollapse = ref(false)
const userInfo = ref({
  username: '学生',
  avatarUrl: ''
})

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

onMounted(() => {
  const storedUserInfo = getUserInfo()
  if (storedUserInfo) {
    userInfo.value = {
      username: storedUserInfo.name || '学生',
      avatarUrl: storedUserInfo.avatarUrl
    }
  }
})

const handleCommand = (command) => {
  if (command === 'logout') {
    ElMessageBox.confirm('确认退出登录吗?', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      const currentUser = getCurrentUser()
      if (currentUser) {
        removeCurrentUser()
        clearLoginInfo(currentUser.username, currentUser.type)
      } else {
        clearLoginInfo()
      }
      router.push('/')
    }).catch(() => { })
  } else if (command === 'profile') {
    router.push('/student/profile')
  }
}
</script>

<style scoped>
.student-layout {
  height: 100vh;
}

.el-container {
  height: 100%;
}

.aside-container {
  background-color: #304156;
  color: #bfcbd9;
  position: relative;
  transition: width 0.3s ease-in-out;
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2b3649;
  padding: 0 10px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.logo.collapsed {
  padding: 0 16px;
}

.logo-image {
  width: 32px;
  height: 32px;
  margin-right: 8px;
  transition: margin-right 0.3s ease-in-out;
}

.logo.collapsed .logo-image {
  margin-right: 0;
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  transition: opacity 0.2s ease-in-out;
}

.el-header {
  background-color: #fff;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e6e6e6;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-dropdown {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 8px;
  height: 48px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
  background-color: #f0f2f5;
}

.username {
  font-size: 14px;
  margin-right: 4px;
}

.user-dropdown:hover {
  background-color: #f5f7fa;
}

.el-main {
  background-color: #f0f2f5;
  padding: 20px;
}

.toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.3s;
}

.toggle-button:hover {
  background-color: #f5f7fa;
}

.el-menu {
  border-right: none;
  transition: width 0.3s ease-in-out;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 220px;
}

.el-menu--collapse {
  width: 64px;
}
</style>